<template>
  <article class="process">
    <div class="process-left">
      <template v-for="(item, index) in menuList">
        <div
          :key="index"
          class="group"
        >
          <draggable
            v-bind="{
              group: { name: 'people', pull: 'clone', put: false },
              sort: false,
              ghostClass: 'ghost',
            }"
            :sort="false"
            :list="item.templateNodeList"
            class="draggable"
            :move="handleMove"
          >
            <div
              v-for="(data, index) in item.templateNodeList"
              :key="index"
              class="item"
              :class="{ 'is-disabled': data.fixed }"
            >
              <span class="name">{{ data.nodeName }}</span>
            </div>
          </draggable>
        </div>
      </template>
    </div>
    <div
      class="process-right"
      :class="{'is-required': isRequired}"
    >
      <!-- 配置容器 -->
      <widget-step
        ref="widgetStep"
        class="widget-step"
        :data="widgetStep"
        :select.sync="widgetStepSelect"
      />
    </div>
  </article>
</template>

<script>
import draggable from 'vuedraggable'
import widgetStep from './widgetStep.vue'
export default {
  name: 'HzProcess',
  components: { draggable, widgetStep },
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [],
      widgetStep: {
        list: []
      },
      widgetStepSelect: null,
      isRequired: false
    }
  },
  created() { },
  methods: {
    handleMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.process {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 120px);
  .process-right {
    width: 300px;
    background-color: #f3f5f8;
    border-radius: 5px;
    border: 1px dashed #ccc;
    &.is-required {
      border-radius: 0;
      border: 1px solid #f56c6c;
    }
  }
  .process-left {
    padding: 60px;
    background-color: #eeeeee;
    width: calc(100% - 320px);
    display: flex;
    justify-content: center;
    border: 1px dashed #ccc;
    .draggable {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  .item {
    width: 148px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e9ecf3;
    border-radius: 3px;
    margin: 0 7px 8px 0;
    transition: all 0.2s ease;
    cursor: pointer;
    &:hover {
      border: 1px dashed #1652db;
    }
  }
  .is-disabled {
    cursor: not-allowed;
    border-color: #e9ecf3;
    &:hover {
      border: 1px solid #e9ecf3;
    }
    span {
      color: #9b9da3;
    }
  }
}
</style>
